<script setup lang="ts">
import { ContentWrapNoHeaderLine } from '@/components/ContentWrap'
import {
  ElButton, ElMessage
} from 'element-plus'
import { reactive, ref, unref } from 'vue'
import { ConfigData, ConfigEmailData } from "@/api/config/types";
import { saveCongigApi, getCongigDetailApi, getEmailDetailApi, saveEmailApi } from "@/api/config/index";
import { getIpListToSelectApi } from "@/api/auth/ip/index"
import Edit from "./edit.vue";
import Email from "./email.vue";
import { FormSchema } from "@/types/form";
import { useValidator } from "@/hooks/web/useValidator";
import { IPData } from '@/api/auth/ip/types';
import { Dialog } from '@/components/Dialog'

const { required } = useValidator()

const loading = ref(false)
const editRef = ref<ComponentRef<typeof Edit>>()
const save = async () => {
  const config = unref(editRef)
  await config?.elFormRef?.validate(async (isValid) => {
    if (isValid) {
      loading.value = true
      const data = (await config?.getFormData()) as ConfigData
      const res = await saveCongigApi(data)
        .catch(() => {
        })
        .finally(() => {
          loading.value = false
        })
      if (res) {
      }
    }
  })
}

const formData = ref({} as ConfigData)

const getInfo = () => {
  getCongigDetailApi().then(res => {
    formData.value = JSON.parse(res.data.val);
  })
}
const ipList = ref([
  { id: '*', name: '所有' }
] as IPData[]);
const getIpList = () => {
  getIpListToSelectApi().then(res => {
    ipList.value = ipList.value.concat(res.data)
  })
}
const formSchema = reactive<FormSchema[]>([
  {
    field: 'mete_file_num',
    label: '组内监控文件最大数量',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'ip_white',
    label: '管理IP地址白名单',
    component: 'Select',
    componentProps: {
      optionsAlias: {
        labelField: 'name',
        valueField: 'id'
      },
      options: ipList.value,
      valueKey: 'id'
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'login_check_num',
    label: '鉴别失败最大次数',
    component: 'Input',
    componentProps: {
      slots: {
        append: true
      }
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'login_check_minute',
    label: '鉴别失败限制时间',
    component: 'Input',
    componentProps: {
      slots: {
        append: true
      }
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'password',
    label: '密码复杂度',
    component: 'Select',
    componentProps: {
      options: [
        {value: 'A-8', label: '大小写字母+数字+符号 8位以上'},
        {value: 'A-12', label: '大小写字母+数字+符号 12位以上'},
        {value: 'A-15', label: '大小写字母+数字+符号 15位以上'},
        {value: 'B-8', label: '不限大小写 8位以上'},
        {value: 'B-15', label: '不限大小写 8位以上'}
      ]
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'password_expire',
    label: '密码有效期',
    component: 'Select',
    componentProps: {
      options: [
        {value: '1', label: '1个月'},
        {value: '3', label: '3个月'},
        {value: '6', label: '6个月'},
        {value: '12', label: '12个月'},
        {value: '9999', label: '不限'},
      ]
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'search_max',
    label: '审计/历史/告警查询最大范围',
    component: 'Select',
    componentProps: {
      options: [
        {value: '1', label: '1个月'},
        {value: '3', label: '3个月'},
        {value: '6', label: '6个月'},
        {value: '12', label: '12个月'},
        {value: '9999', label: '不限'},
      ]
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'delete_log_record',
    label: '删除日志端操作记录',
    component: 'Select',
    componentProps: {
      options: [
        {value: '24', label: '24个月'},
        {value: '12', label: '12个月'},
        {value: '6', label: '6个月'},
        {value: '3', label: '3个月'},
        {value: '1', label: '1个月'},
      ]
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'delete_manage_record',
    label: '删除管理端操作记录',
    component: 'Select',
    componentProps: {
      options: [
        {value: '24', label: '24个月'},
        {value: '12', label: '12个月'},
        {value: '6', label: '6个月'},
        {value: '3', label: '3个月'},
        {value: '1', label: '1个月'},
      ]
    },
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'warn_level',
    label: '审计危险等级划分',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'state_level',
    label: '状态危险等级划分',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'action',
    label: '　',
    component: 'Input',
    formItemProps: {
      rules: []
    }, colProps: {
      span: 24
    }
  }
]);

const emailFormSchema = reactive<FormSchema[]>([
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'password',
    label: '密码',
    component: 'InputPassword',
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },{
    field: 'host',
    label: '发件服务器',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },{
    field: 'port',
    label: '端口',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    }, colProps: {
      span: 24
    }
  },
]);
const handleReset = () => {
  const edit = unref(editRef)
  edit?.elFormRef?.resetFields()
}

const dialogVisible = ref(false);
const emailData = ref({} as ConfigEmailData)
const toSetEmail = () => {
  getEmailDetailApi().then(res => {
    emailData.value = JSON.parse(res.data.val);
    dialogVisible.value = true;
  })
}
const emailRef = ref<ComponentRef<typeof Email>>()
const saveEmail = async () => {
  const email = unref(emailRef)
  await email?.elFormRef?.validate(async (isValid) => {
    if (isValid) {
      loading.value = true
      const data = (await email?.getFormData()) as ConfigEmailData
      const res = await saveEmailApi(data)
        .catch(() => {
        })
        .finally(() => {
          loading.value = false
        })
      if (res) {
        dialogVisible.value = false;
        ElMessage.success(res.msg);
      }
    }
  })
}
const handleEmailReset = () => {
  const edit = unref(emailRef)
  edit?.elFormRef?.resetFields()
}


getInfo();
getIpList();
</script>

<template>
  <ContentWrapNoHeaderLine title="管理设置">
    <Edit ref="editRef" :form-schema="formSchema" :current-row="formData" :to-set-email="toSetEmail"/>

    <ElButton type="primary" :loading="loading" @click="save">
      提交
    </ElButton>
    <ElButton @click="handleReset">重置</ElButton>
  </ContentWrapNoHeaderLine>
  <Dialog v-if="dialogVisible" v-model="dialogVisible" title="设置邮箱" :width="470" :max-height="300">
    <Email
        ref="emailRef"
        :form-schema="emailFormSchema"
        :current-row="emailData"
    />
    <template #footer>
      <ElButton @click="handleEmailReset">重置</ElButton>
      <ElButton type="primary" :loading="loading" @click="saveEmail">
        提交
      </ElButton>
    </template>
  </Dialog>
</template>
